<template>
  <div class="main-content">
    <div class="card" style="padding: 15px">
      您好，{{ user.name }}！欢迎使用本平台
    </div>

    <div style="display: flex">
      <div style="flex: 12%; height: 350px; background-color: #0c0c0c"></div>
      <div style="flex: 76%">
        <el-carousel height="350px">
          <el-carousel-item v-for="item in carouselData">
            <img :src="item" alt="" style="width: 100%; height: 350px">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="flex: 12%; height: 350px; background-color: #0c0c0c"></div>
    </div>


    <!-- 平台介绍 -->
    <div class="platform-introduction">
      <h2 class="section-title">平台介绍</h2>
      <p>欢迎来到我们的成长成才监测平台，我们致力于提供最优质的教育资源和学习工具，帮助学生和教师实现更好的学习效果。</p>
      <p>平台特点：</p>
      <ul>
        <li>丰富的课程资源：我们提供各种学科的课程，满足不同学生的学习需求。</li>
        <li>个性化学习规划：根据学生的学习情况，提供个性化的学习建议和规划。</li>
        <li>心理健康：学生可以测试自己心理健康状况，也可以咨询心理专业的老师。</li>
        <li>学习资源推荐：根据学生的学习水平和兴趣，推荐合适的学习资源。</li>
      </ul>
      <!--        <p @click="goToCourse(course.url)">{{ course.courseName }}</p>-->
    </div>

    <!-- 学习资源推荐 -->
    <div class="main-content">
      <div class="platform-introduction">
        <h2 class="section-title">课程资源</h2>
        <div style="display: flex; margin-top: 20px; height: 400px">
          <div style="flex: 2; margin-left: 10px">
            <el-row :gutter="20">
              <el-col :span="6" style="margin-bottom: 35px" v-for="item in rightData">
                <img :src="item.img" alt="" style="width: 100%; height: 150px; border-radius: 5px; border: 1px solid #cccccc; cursor: pointer" @click="goToCourse(item.url)">
                <div style="color: #170d0d; margin-top: 10px; text-align: center" class="overflowShow" >{{ item.courseName }}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>




    <!-- 学习规划 -->
    <div class="platform-introduction">
      <h2 class="section-title">学习规划</h2>
      <p style="font-size: 18px">确定学习的具体方向和期望达到的成果，评估自己当前的学习水平、优势、劣势以及需要改进的地方，
        合理分配每天、每周或每月的学习时间，确保有足够的时间用于学习和复习。同时，也要留出适当的休息和娱乐时间，保持学习的平衡性，
        按照计划开始学习，并定期检查自己的进度和效果。如果发现计划不符合实际情况或效果不佳，应及时调整。</p>
      <button @click="goToCareerPlanning" style="font-size: 18px">了解更多</button>
    </div>



  </div>
</template>
<script>
import axios from "axios";

export default {

  data() {
    return {
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
      isLoading: true, // 加载状态
      achievements: [],
      carouselData: [
        require('@/assets/img/image1.png'),
        require('@/assets/img/image3.jpg'),
        require('@/assets/img/image4.jpg'),
        require('@/assets/img/image8.webp'),
        require('@/assets/img/lun-4.jpg'),
      ],
      rightData: [],


    }
  },
  mounted() {
    this.getData()
  },

  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {

    getData() {
      this.getRightData('/course/selectAll')

    },
    getRightData(url) {
      this.$request.get(url).then(res => {
        if (res.code === '200') {
          this.rightData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    goToCareerPlanning() {
      this.$router.push('/student/learningHabit');
    },
    goToCourse(url) {
      window.open(url, '_blank'); // 在新标签页中打开课程链接
    }
  }
}
</script>

<style scoped>
.main-content {
  font-family: 'Arial', sans-serif;
  color: #333;
  background-color: #f7f7f7;
  padding: 20px;
}



.section-title {
  color: #85CE36;
  font-size: 24px;
  margin-bottom: 15px;
}

.progress-section, .achievements-section, .resource-recommendations, .mental-health-tips, .event-calendar {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.achievements-list, .course-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.achievement-item, .course-item {
  width: calc(10% - 10px);
  margin: 10px;
  text-align: center;
}

.achievement-image, .course-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 5px;
}

.tips-content {
  background-color: #f2f2f2;
  padding: 15px;
  border-radius: 5px;
}

.event-calendar .calendar {
  height: 400px;
}

.student-info p, .learning-resources ul, .events ul, .mental-health p, .career-planning p, .interaction-area textarea {
  margin: 10px 0;
}
.platform-introduction {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.platform-introduction h2 {
  color: #85CE36; /* 绿色 */
  font-size: 28px; /* 增大标题字体大小 */
  margin-bottom: 15px;
}

.platform-introduction p {
  line-height: 2;
  color: #3f3b3b; /* 深灰色 */
  font-size: 20px; /* 增大段落字体大小 */
}

.platform-introduction ul {
  list-style-type: disc;
  margin-left: 20px;
  font-size: 16px;
  color: #8c939d;
}


.course-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.course-item {
  width: calc(33% - 10px);
  margin: 10px;
  text-align: center;
}

.course-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 5px;
}
</style>
